<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="js/jquery-1.7.2.min.js"></script>
	
	<!-- PhoneGap references 
	<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>-->
	
	<!-- Game references -->
	<script src="js/point.js"></script>	
	<script src="js/global.js"></script>	
	<script src="js/chesspiece.js"></script>
	<script src="js/cannonpiece.js"></script>
	<script src="js/chariotpiece.js"></script>
	<script src="js/elephantpiece.js"></script>
	<script src="js/horsepiece.js"></script>
	<script src="js/soliderpiece.js"></script>
	<script src="js/advisorpiece.js"></script>
	<script src="js/generalpiece.js"></script>
	<script src="js/soundmanager.js"></script>
	<script src="js/player.js"></script>
	<script src="js/basicrule.js"></script>
	<script src="js/board.js"></script>	
	<script src="js/play.js"></script>
	<title> </title>
</head>
<body>
	<div id="bg"><img src="images/bg1.png"/><button id="back">back</button></div>
	<div id="main-nav" class="screen">
		<ul>
			<li class="title">Chess</li>
			<li class="item pl">New game</li>
			<li class="item op">Option</li>
			<li class="item ab">About</li>
		</ul>	
	</div>
	<div id="option" class="screen hide">
		<ul>
			<li class="title"><h2>Option</h2></li>
			<li class="i-op">
				<span>Sound</span>
				<input type="checkbox" class="checbox" value="1"/>
			</li>		
			<li class="i-op">
				<span>Music</span>
				<input type="checkbox" class="checbox" value="2"/>
			</li>
		</ul>	
	</div>
	<div id="about" class="screen hide">
		<h2>Chess</h2>
		<p>Author:</p>
		<p>Nguyễn Khắc Trung</p>
		<p>Kiều Quốc Thắng</p>	
	</div>
	<div id="play" class="screen">
		<canvas id="canvas" width="480px" height="800px"></canvas>
	</div>
	<div id="thongBao"></div>
</body>
</html>
<script>
	$(document).ready(function() {
		$('.ab').click(function() {
			$('#option').hide();
			$('#high-score').hide();
			$('#play').hide();
			
			$('#main-nav').animate({
				marginLeft: '-=100%',
				opacity: '0'
			}, 1000).hide();
			$('#about').show().animate({
				marginRight: '+=100%',
				opacity: '1'
			}, 1000);
			$('#back').show();
		})
		
		$('.op').click(function() {
			$('#about').hide();
			$('#high-score').hide();
			$('#play').hide();
			
			$('#main-nav').animate({
				marginLeft: '-=100%',
				opacity: '0'
			}, 1000).hide();
			$('#option').show().animate({
				marginRight: '+=100%',
				opacity: '1'
			}, 1000);
			$('#back').show();
		})
		
		$('.pl').click(function() {
			$('#main-nav').animate({
				marginLeft: '-=100%',
				opacity: '0'
			}, 1000);
			$('#main-nav').hide();
			$('#about').hide();
			$('#option').hide();
			$('#high-score').hide();
			$('#play').show();
			
			$('#play').animate({
				marginRight: '+=100%',
				opacity: '1'
			}, 1000);
			$('#back').show();			
			Load();
		})
		
		$('#back').click(function() {
			$('.screen').animate({
				opacity: '0'
			}, 1000);
			$('.screen').hide();
			$('#main-nav').show();
			$('#main-nav').animate({
				marginLeft: '+=100%',
				opacity: '1'
			}, 0);
			$(this).hide();
		})
	})
</script>
